import { Component, Host, h, Method } from '@stencil/core';
import { iApp } from '../../utils/interfaces';
import { Dialog } from '../dialog/dialog';
@Component({
  tag: 'ji-app-door',
  styleUrl: 'app-door.scss',
  shadow: true,
})
export class AppDoor {

  /**
   * @description 默认应用
   * @memberof AppDoor
   */
  appListBase: iApp[] = [
    {
      name: '云帐房风控版',
      identifyCode: 'YZFFKB',
      url: '',
      img: 'http://tupian.yunzhangfang.com/app-img/app-fengkong.png',
      isActive: true
    },
    {
      name: '云帐房财税版',
      identifyCode: 'YZFCSB',
      url: '',
      img: 'http://tupian.yunzhangfang.com/app-img/app-caishui.png',
      isActive: false
    },
    {
      name: '云帐房薪税版',
      identifyCode: 'YZFXSB',
      url: '',
      img: 'http://tupian.yunzhangfang.com/app-img/app-xinshui.png',
      isActive: false
    },
    {
      name: '云帐房进销存',
      identifyCode: 'YZFJXC',
      url: '',
      img: 'http://tupian.yunzhangfang.com/app-img/app-jinxiaocun.png',
      isActive: false
    },
    {
      name: '云帐房集团税务',
      identifyCode: 'YZFJTSW',
      url: '',
      img: 'http://tupian.yunzhangfang.com/app-img/app-shuiwu.png',
      isActive: false
    },
    {
      name: '设备助手',
      identifyCode: 'SBZS',
      url: '',
      img: 'http://tupian.yunzhangfang.com/app-img/app-shebei.png',
      isActive: false
    }
  ];

  // 切换应用
  @Method()
  changeApp(item) {
    if (item['isActive']) {
      return;
    }
    const dialog = new Dialog();
    dialog.init({
      titles: `您确定将 <b style='color:#333;'>${item['name']}</b> 切换为当前应用吗？`,
      nzContent: null
    }).then(res => {
      res.addEventListener('onHide', data => {
        console.log(data);
        if (!!item['url'] && item['url'].length > 0) {
          window.location.href = item['url']; // 打开新链接
        }
      })
    });

  }

  render() {
    return (
      <Host>
        <div class="ji-app-door">
          <h3 class="j-title"><ji-icon name="arrow-lift"></ji-icon>返回控制台</h3>
          <ul>
            {
              this.appListBase.map(item => {
                return (
                  <li class={item['isActive'] ? "li-active" : null} onClick={this.changeApp.bind(this, item)}>
                    <a>
                      <img src={item['img']} alt={item['name']} />
                      <div class="a-name">{item['name']}</div>
                    </a>
                    {item['isActive'] ? (<div class="a-curent" >当前应用</div>) : null}
                  </li>
                );
              })
            }
          </ul>
        </div>
      </Host>
    );
  }

}
